<template>
	<view class='container' :style="{ 'height': windowHeight + 'upx' }">

		<view class="caption-bar" :style="{ 'height': captionBarHeight + 'upx' }">
			<navigator url="subject/subject">
				<view class="left">
					<text class="left-txt">{{subject}}</text>
					<image src="../../../static/res/edit.png" class="left-ico"></image>
				</view>
			</navigator>


			<navigator url="grade/grade">
				<view class="right">
					<text class="right-txt">{{grade}} ></text>
				</view>
			</navigator>

		</view>

		<view class="content-container" :style="{ 'height': contentContainerHeight + 'upx' }">

			<view class="school-caption">
				<image src="../../../static/res/school.png" class="school-badge"></image>
				<view class="school-names">
					<text class="school-fullname">常州外国语学校</text>
					<text class="school-shortname">简称：常外</text>
				</view>
			</view>
			<view class="line"></view>

			<view class="scores">
				<view class="left-scores">
					<text class="score-txt">总人数：80</text>
					<text class="score-txt">最高分：415</text>
				</view>

				<view class="right-scores">
					<text class="score-txt">平均分：352</text>
					<text class="score-txt">最低分：256</text>
				</view>
			</view>

			<view class="scores-desc">
				<block class="scores-desc-num">34%</block>
				<block>的学生高于平均分</block>
			</view>

			<view class="chart-box">
				111
			</view>

			<view class="line space"></view>

			<navigator url="detail/detail">
				<view class="go-detail">查看更多详细数据 ></view>
			</navigator>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				captionBarHeight: 100,
				contentContainerHeight: 0,
				grade: '高一(3班)',
				subject: '2021期中考试'
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2;
					this.contentContainerHeight = this.windowHeight - this.captionBarHeight - 50;
				}
			})
		},
		methods: {
			setGrade(grade) {
				this.grade = grade;
			},
			setSubject(subject) {
				this.subject = subject;
			}
		}
	}
</script>

<style>
	@import url("clazz.css");
</style>
